import { useState, useEffect, useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
// import { Button } from 'antd';
import { Tabs, Toast, Button } from 'antd-mobile';
import { getMessage, TextWidget } from '@inbiz/react';
import { getPreView, getEditor } from '@inbiz/utils';
import BizTitle from '@inbiz/basic/BizTitle';
import BizBody from '@inbiz/basic/BizBody';
import BizHeader from '@inbiz/basic/BizHeader';
import EsayViewItem from './EsayViewItem';
import './style.less';

const EasyView = forwardRef((props: any, ref) => {
  const {
    title,
    titleIcon,
    showMore,
    easyLoadMoreLocation,
    easyAssociatePage,
    easyLoadMoreText,
    h5_easydynamicdata,
    h5_easyDefaultPage,
    tabVisible,
  } = props;

  // 判断是否为设计页
  const isEditor = getEditor();
  const [activeTab, setActiveTab] = useState<any>(
    localStorage.getItem(props.controlId + 'H5_processTabs') || h5_easyDefaultPage,
  );
  const easyItemRef = useRef({ getData: Function });

  const keyToType = useMemo(() => {
    switch (activeTab) {
      case '1':
        return 'apply';
      case '2':
        return 'todo';
      case '3':
        return 'applying';
      case '4':
        return 'draft';
      case '5':
        return 'toMe';
      case '6':
        return 'myApply';
      case '7':
        return 'done';
      case '8':
        return 'classification';
      case '9':
        return 'assigned';
      case '10':
        return 'willassign';
      case '11':
        return 'receive';
      default:
        return 'apply';
    }
  }, [activeTab]);

  const onLoadMore = () => {
    if (easyAssociatePage) {
      let path = easyAssociatePage.split(',')[0];
      window.location.href = getPreView(path) + `/${keyToType}?type=mobile&tabKey=${activeTab}`;
    } else {
      // 未配置关联页面
      Toast.show({
        content: getMessage('processCenter.associatedPageIsNotConfigured'),
      });
    }
  };

  // 头部props
  const headerProps = {
    ...props,
    extra: showMore && easyLoadMoreLocation == 'topRight' && (
      <Button
        type="link"
        onClick={onLoadMore}
        style={{
          padding: 0,
          fontSize: 'var(--inbiz-font-size-base)',
          color: 'var(--inbiz-color-secondary-text)',
        }}
      >
        <TextWidget>{easyLoadMoreText}</TextWidget>
        {' >'}
      </Button>
    ),
  };

  useEffect(() => {
    if (isEditor) {
      setActiveTab(h5_easyDefaultPage);
    } else {
      setActiveTab(localStorage.getItem(props.controlId + 'H5_processTabs') || h5_easyDefaultPage);
    }
  }, [h5_easyDefaultPage]);

  useEffect(() => {
    if (activeTab != localStorage.getItem(props.controlId + 'H5_processTabs')) {
      // 本地存储
      localStorage.setItem(props.controlId + 'H5_processTabs', activeTab);
    }
    // 卸载
    // return() => {
    //   localStorage.removeItem(props.controlId +'H5_processTabs');
    // }
  }, [activeTab]);

  useImperativeHandle(ref, () => ({
    getData: easyItemRef?.current?.getData,
  }));

  return (
    <>
      <BizHeader {...headerProps}>
        <BizTitle titleOption={title} iconOption={titleIcon} />
      </BizHeader>
      <BizBody {...props}>
        <Tabs
          className={tabVisible == 'visible' || tabVisible === true ? '' : 'process-notabstitle'}
          defaultActiveKey={
            localStorage.getItem(props.controlId + 'H5_processTabs') || h5_easyDefaultPage
          }
          activeKey={activeTab}
          onChange={setActiveTab}
        >
          {h5_easydynamicdata?.map((item: any) => {
            return (
              <Tabs.Tab
                title={<TextWidget>{item?.title}</TextWidget>}
                key={item?.id}
                destroyOnClose={true}
              >
                <EsayViewItem
                  ref={easyItemRef}
                  processData={item}
                  activeTab={activeTab}
                  keyToType={keyToType}
                  {...props}
                />
              </Tabs.Tab>
            );
          })}
        </Tabs>
      </BizBody>
    </>
  );
});

export default EasyView;
